<template>
	<view>
		<view class="container">
			<u-form :model="form" ref="uForm" :rules="rules" :errorType="['message']" :border-bottom="false">
				<u-gap height="30" bg-color="#f8f8f8"></u-gap>
				<view class="common-msg-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>标题(必填)</text>
				</view>
				<view class="common-msg-row">
					<u-form-item prop="title">
						<u-input v-model="form.title" type="textarea" placeholder="请填写标题" :auto-height="false"
							maxlength="800" :clearable="false" />
						<view class="numerical">
							{{form.title.length}}/20
						</view>
					</u-form-item>
				</view>
				
				<view class="common-msg-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>正文(必填)</text>
				</view>
				<view class="common-msg-row">
					<u-form-item prop="content">
						<u-input v-model="form.content" type="textarea" placeholder="请填写正文" :auto-height="false"
							maxlength="800" :clearable="false" />
						<!-- <view class="numerical">
						{{form.content.length}}/800
					</view> -->
					</u-form-item>
				</view>
				<view class="common-msg-row" style="background-color: transparent;">
					<u-form-item prop="videoUrl">
						<view v-if="!form.videoUrl" class="uploadBox" @click="chooseFile">
							<image class="uploadAdd" src="@/static/img/dynamic/pic3.png" mode=""></image>
						</view>
						<view class="videoBox" v-else>
							<video class="uploadVideo" :src="form.videoUrl">
								<cover-image class="delVideo" @click="delVideo" src="@/static/img/common/del.png">
								</cover-image>
							</video>

							<!-- <image src="@/static/img/common/del.png" mode="" class="delVideo" @click="delVideo"></image> -->
						</view>
					</u-form-item>
				</view>
				<u-gap height="30" bg-color="#f8f8f8"></u-gap>
				<u-button @click="submit" :custom-style="buttonStyle" shape="circle" hover-class="none">发布</u-button>
				<u-gap height="30" bg-color="#f8f8f8"></u-gap>
			</u-form>
		</view>
	</view>

</template>

<script>
	import storage from "@/utils/storage";
  import {API} from '@/config/myApi.js'
  import { lk_common } from '@/config/myConfig.js';
	export default {
		data() {
			return {
				id: '',
				form: {
					title: '',
					content: '',
					status: 1,
					videoUrl: ''
				},
				buttonStyle: {
					width: "100%",
					color: "#fff",
					fontSize: "32rpx",
					backgroundColor: "#F4333C",
				},
				rules: {
					title: [{
							required: true,
							message: '标题不能为空',
							trigger: ['blur', 'change']
						},
						{
							max: 20,
							message: '标题不能大于20个字符',
							trigger: ['blur', 'change']
						}
					],
					content: [{
							required: true,
							message: '正文不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 5,
							message: '正文不能少于5个字符',
							trigger: ['blur', 'change']
						}
					],
					videoUrl: [
						{
							required: true,
							message: '视频不能为空',
							trigger: ['change']
						}, 
					]
				},


			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad({id}) {
				if(id) {
					this.id = id
					this.getInfo()
				}
		},
		methods: {
			// 获取基本信息
			getInfo() {
				API.getDynamicById(this.id)
					.then(res => {
						if (res.code === 200) {
							this.form = res.result
							if(this.form.titleTmp) {
								delete this.form.titleTmp
							}
							if(this.form.contentTmp) {
								delete this.form.contentTmp
							}
							
						}
					})
			},
			delVideo() {
				this.form.videoUrl = ''
			},
			chooseFile() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						uni.uploadFile({
							url: `${lk_common}/common/common/upload/file`, 
							filePath: res.tempFilePath,
							name: 'file',
							header: {
							   "accessToken": storage.getAccessToken(),
							},
							success: (res1) => {
								let data = JSON.parse(res1.data)
								this.form.videoUrl = data.result
								uni.hideLoading()
							},
							fail() {
								uni.hideLoading()
							}
						});
					},
					fail() {
						uni.hideLoading()
					}
				});
			
				
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							title:'发布中...'
						})
						let api = null
						if(this.form.id) {
							api = API.updateDynamic
						} else {
							api = API.addDynamic
						}
						api(this.form).then(res =>{
							if(res.code === 200) {
								uni.showToast({
									title:'发布成功',
									icon:'none',
									success() {
										setTimeout(()=> {
											if(this.form?.id) {
												uni.navigateTo({
													url:'/pages/mine/dynamic/index'
												})
											} else {
												uni.navigateBack()
											}
											
											
										},1000)
									}
								})
							} else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
							}
						}).finally(()=>{
							uni.hideLoading()
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common-navbar.scss";

	.videoBox {
		width: 100%;
		position: relative;

		.uploadVideo {
			width: 100%
		}

		.delVideo {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			background-color: #999999;
			border-radius: 50%;
			z-index: 99;
			// display: flex;
			// align-items: center;
			// justify-content: center;
		}
	}


	.common-msg-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		>.img {
			width: 5rpx;
			height: 28rpx;
		}

		>text {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-left: 10rpx;
		}
	}

	.uploadBox {
		width: 200rpx;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		.uploadAdd {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.common-msg-row {
		position: relative;
		padding: 0rpx 24rpx;
		margin-bottom: 50rpx;
		width: 100%;
		min-height: 300rpx;
		background: #fff;
		border-radius: 14rpx;

		// 计算数字
		.numerical {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 40rpx;
		}

		/deep/.u-form-item__message {
			position: absolute;
			bottom: -12px;
			left: -38px;
		}

		/deep/.u-list-item {
			margin: 4rpx;
		}
	}
</style>
